<template>
  <div style="padding: 20px">
    <Alert message="动态表单示例" type="info" show-icon style="margin-bottom: 12px" />
    <div class="mb-4">
      <a-button class="mr-2" @click="changeLabel3"> 更改字段3label </a-button>
      <a-button class="mr-2" @click="changeLabel34"> 同时更改字段3,4label </a-button>
      <a-button class="mr-2" @click="appendField"> 往字段3后面插入字段10 </a-button>
      <a-button class="mr-2" @click="deleteField"> 删除字段11 </a-button>
    </div>
    <a-card>
      <schema-form ref="dynamicForm" v-bind="formProps" @submit="confirm"> </schema-form>
    </a-card>
    <a-card>
      <a-form
        ref="formRef"
        name="dynamic_form_item"
        :model="dynamicValidateForm"
        v-bind="formItemLayoutWithOutLabel"
      >
        <a-form-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
          v-bind="index === 0 ? formItemLayout : {}"
          :label="index === 0 ? '小小标题' : ''"
          :name="['domains', index, 'value']"
          :rules="{
            required: true,
            message: '不能为空',
            trigger: 'change',
          }"
        >
          <a-input
            v-model:value="domain.value"
            placeholder="请输入"
            style="width: 60%; margin-right: 8px"
          />
          <MinusCircleOutlined
            v-if="dynamicValidateForm.domains.length > 1"
            class="dynamic-delete-button"
            @click="removeDomain(domain)"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayoutWithOutLabel">
          <a-button type="dashed" style="width: 60%" @click="addDomain">
            <PlusOutlined />
            添加项目
          </a-button>
        </a-form-item>
        <a-form-item v-bind="formItemLayoutWithOutLabel">
          <a-button type="primary" html-type="submit" @click="submitForm">确定</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { Alert, message } from 'ant-design-vue';
  import { schemas } from './form-schema';
  import type { SchemaFormProps, SchemaFormInstance } from '@/components/core/schema-form';
  import { SchemaForm } from '@/components/core/schema-form';
  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import type { FormInstance } from 'ant-design-vue';

  defineOptions({
    name: 'DemosFormDynamicForm',
  });

  /**
   * @description 基础表单
   */
  const dynamicForm = ref<SchemaFormInstance>();

  const formProps: SchemaFormProps = { schemas, labelWidth: 120, actionColOptions: { span: 24 } };

  // 点击提交
  function confirm() {
    console.log('dynamicForm.value', dynamicForm.value?.formModel);

    dynamicForm.value?.validate().then(() => message.success('验证通过！'));
  }

  function changeLabel3() {
    dynamicForm.value?.updateSchema({
      field: 'field3',
      label: '字段3 New',
    });
  }
  function changeLabel34() {
    dynamicForm.value?.updateSchema([
      {
        field: 'field3',
        label: '字段3 New++',
      },
      {
        field: 'field4',
        label: '字段4 New++',
      },
    ]);
  }

  function appendField() {
    dynamicForm.value?.appendSchemaByField(
      {
        field: 'field10',
        label: '字段10',
        component: 'Input',
        colProps: {
          span: 8,
        },
      },
      'field3',
    );
  }
  function deleteField() {
    dynamicForm.value?.removeSchemaByField('field11');
  }

  interface Domain {
    value: string;
    key: number;
  }
  const formRef = ref<FormInstance>() as any;
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };
  const formItemLayoutWithOutLabel = {
    wrapperCol: {
      xs: { span: 24, offset: 0 },
      sm: { span: 20, offset: 4 },
    },
  };
  const dynamicValidateForm = reactive<{ domains: Domain[] }>({
    domains: [],
  });
  const submitForm = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', dynamicValidateForm.domains);
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  const resetForm = () => {
    formRef.value.resetFields();
  };
  const removeDomain = (item: Domain) => {
    const index = dynamicValidateForm.domains.indexOf(item);
    if (index !== -1) {
      dynamicValidateForm.domains.splice(index, 1);
    }
  };
  const addDomain = () => {
    dynamicValidateForm.domains.push({
      value: '',
      key: Date.now(),
    });
  };
</script>

<style lang="less" scoped>
  .btn-rows {
    button {
      margin-right: 12px;
    }
  }
</style>
